Color
IIC2026 2020-2
Percepción de canales de color
Color
IIC2026 2020-2
Definiendo colores en D3.js en base a modelos
const color = d3.color("rgb(10%, 20%, 30%)");
const color = d3.color("hsl(120, 50%, 20%)");
Rojo, verde y azul como canales
Saturación y luminancia
CIELAB y CIELUV
Espacios de color que buscan representar más fielmente las diferencias perceptuales entre colores.
Distancia númerica bajo estos modelos es similar a diferencia perceptual.
Interpolación de D3.js
const funcion = d3.interpolateRgb("rgb(0, 100, 0)", "rgb(100, 0, 100)");
console.log(funcion(0.5)); // "rgb(50, 50, 50)"
const funcion = d3.interpolateLab("rgb(0, 100, 0)", "rgb(100, 0, 100)");
console.log(funcion(0.5)); // "rgb(77, 67, 61)"
Luminancia
- Canal de magnitud, apropiado para atributos ordenados.
- El contraste con colores próximos desvirtua su percepción.
- Se recomiendan menos de cuatro pasos discriminables para regiones no contiguas.
Luminancia y contraste
(Fuente imagen: Programming Design Systems )
Saturación
- Canal de magnitud, apropiado para atributos ordenados.
- El contraste con colores próximos desvirtua su percepción.
- Se recomiendan pocos pasos discriminables para regiones no contiguas.
Saturación y área
Matiz
- Muy efectivo como canal de identidad y es apropiado para atributos categóricos.
- El contraste con colores próximos desvirtua su percepción.
- Tienes varios pasos de discriminalidad, desde 6 a 12.
- Eventualmente puede usarse sobre datos ordenados, pero no es muy intuitivo.